<template>
    <div class="footer">
        <transition>
            <router-view></router-view>
        </transition>
        <div class="tabbar">
        <router-link to="/footer/host">首页</router-link>
        <router-link to="/footer/tuan">爆爆团</router-link>
        <router-link to="/footer/list">订单</router-link>
        <router-link to="/footer/mine">我的</router-link>
        </div>
    </div>
</template>

<script>
export default {

}
</script>


<style scoped>
.footer {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
}
.tabbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    
    width: 100%;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
    background-color: white;
}
.router-link-active {
    /* 点击变色 */
    text-decoration: none;
    color: red;
}
a {
    text-decoration: none;
}
/* .active {
    color: red;
} */


 .v-enter{ /* 入场动画的初始状态 */
    opacity: 0;
  }
  .v-enter-active{   /* 入场动画执行过程中的状态 */ 
    transition: all 1s;
  }
  .v-enter-to{ /* 入场动画执行结束时的状态 */ 
    opacity: 1;
  }

  .v-leave{ /* 离场动画的初始状态 */
    opacity: 1;
    /* transform: rotate(0deg) scale(1); */
  }
  .v-leave-active{   /* 离场动画执行过程中的状态 */ 
    transition: all 1s;
  }
  .v-leave-to{ /* 离场动画执行结束时的状态 */ 
    opacity: 0;
    /* transform: rotate(360deg) scale(0); */
  }
</style>